<template>
  <view class="attendance-manage">
    <view class="attendance-manage-container">
      <view class="attendance-manage-header">
        <view class="attendance-manage-search">
          <nut-searchbar
            v-model="searchValue"
            placeholder="搜索考勤组或成员"
            @change="handleSearch"
          >
            <template v-slot:leftin>
              <i
                class="iconfont icon-sousuo"
                style="font-size: 20px; color: #666"
              ></i>
            </template>
          </nut-searchbar>
        </view>
      </view>
      <view class="attendance-manage-totals">
        <!-- <text>全公司1411人，参与考勤400人</text> -->
      </view>
      <view class="add-manage-btn">
        <view
          class="manage-btn-box"
          @click="addCheckInRules"
        >
          <i class="iconfont icon-tianjia"></i>
          <text>添加考勤组</text>
        </view>
      </view>
      <view class="attendance-manage-list">
        <view class="rule-title">
          <text>上下班规则</text>
        </view>
        <view
          class="attendance-manage-item"
          v-for="(itm, idx) in rulesList"
          :key="idx"
        >
          <view class="manage-item-box">
            <view class="manage-left">
              <view class="manage-left-item">
                <view class="toDo-list-item-icon">
                  <view class="icon-box"> </view>
                  <view class="icon-text">人力</view>
                </view>
                <view class="toDo-list-item-content">
                  <view class="content-title-box">
                    <view class="content-title-left">
                      <view class="content-title">{{ itm.ruleName }}</view>
                      <nut-tag
                        type="success"
                        class="tag1"
                      >
                        催办
                      </nut-tag>
                    </view>
                    <view class="content-user-info">
                      <view class="time">
                        <view class="time-title">周一至周五（09:30-18:30）</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="manage-left-info">
                <view class="info-item">
                  <view class="info-item-text">
                    <i class="iconfont icon-chuangjianren"></i>
                    <text>创建者：{{ itm.nickName }}</text>
                  </view>
                  <view class="info-item-text">
                    <i class="iconfont icon-chuangjianren"></i>
                    <text>打卡成员：{{ itm.checkNumber }}人</text>
                  </view>
                  <view class="info-item-text">
                    <i class="iconfont icon-guize"></i>
                    <text>规则类型：{{ columns[itm.ruleType]?.text }}</text>
                  </view>
                  <view class="info-item-text">
                    <i class="iconfont icon-wifi"></i>
                    <text>打卡方式：显示-手机WIFI打卡</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="manage-right">
              <i class="iconfont icon-youjiantou1"></i>
            </view>
          </view>
        </view>
      </view>
      <view class="more-manage">
        <view class="more-manage-item">
          <view class="more-manage-title">
            <text>更多管理</text>
          </view>
          <view class="more-manage-btn">
            <view
              class="more-btn-item"
              v-for="item in moreaManageList"
              :key="item"
            >
              <img
                :src="item.imgIcon"
                alt=""
              />
              <text>{{ item.title }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="check-in-settings">
        <view class="check-in-settings-item">
          <view class="check-in-settings-left">
            <img
              src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN019M948a1S9wO2ZC219_!!1034622205.png"
              alt=""
            />
            <text>打卡设置</text>
          </view>
          <view class="check-in-settings-right">
            <i class="iconfont icon-youjiantou1"></i>
          </view>
        </view>
      </view>
      <view class="logo-bottom">
        <img
          src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01ROtCca1S9wNLeJ6zx_!!1034622205.png"
          alt=""
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { navigateTo, useDidShow } from "@tarojs/taro";
import { getRulesList } from "@/api/index";
const searchValue = ref("");
const rulesList = ref([]);
const columns = ref([
  { text: "排班打卡", value: "1" },
  { text: "自由排班", value: "2" },
]);
const moreaManageList = ref([
  {
    imgIcon: "https://img.alicdn.com/imgextra/i3/1034622205/O1CN01QnafyE1S9wNzyh3dM_!!1034622205.png",
    title: "排班管理",
  },
  {
    imgIcon: "https://img.alicdn.com/imgextra/i2/1034622205/O1CN01CNXxGo1S9wO276d0o_!!1034622205.png",
    title: "考勤确认",
  },
  {
    imgIcon: "https://img.alicdn.com/imgextra/i3/1034622205/O1CN01ffgGEE1S9wNv1KU8c_!!1034622205.png",
    title: "工资条",
  },
  {
    imgIcon: "https://img.alicdn.com/imgextra/i2/1034622205/O1CN01GGHPd71S9wO2s8x7o_!!1034622205.png",
    title: "考勤机",
  },
]);
const addCheckInRules = () => {
  navigateTo({
    url: "/packageC/pages/attendanceManage/addCheckInRules/index",
  });
};
// 搜索
const handleSearch = () => {
  console.log(searchValue.value, "searchValue");
  handlegetRulesList(searchValue.value);
};
// 获取列表
const handlegetRulesList = async searchValue => {
  let params = {
    page: 1,
    pageSize: 100,
    ruleName: searchValue,
  };
  const res = await getRulesList(params);
  rulesList.value = res.rows;
};
onMounted(() => {
  handlegetRulesList();
});
useDidShow(() => {
  handlegetRulesList();
});
</script>

<style lang="less">
@import url("./index.less");
</style>
